/**
* Created by yyr on 2018/3/15
*已投资基金编辑》管理费核定
*/
<template>
    <div>
        <div class="ca-p-22 ca-box-border-top-none">
            <el-row>
                <el-col :span="12" class="ca-title">
                    <h3>管理费</h3>
                </el-col>
                <el-col :span='12' class="ca-align-right" v-if="!isAdd">
                    <div>
                        <el-button type="primary" @click="saveManageAss()" size="medium">保存</el-button>
                        <el-button  @click="cancel()" size="medium">取消</el-button>
                    </div>
                </el-col>
            </el-row>
            <table class="ca-table ca-m-t-15">
                <tr>
                    <th width="10%">年份</th>
                    <th width="10%">基金状态</th>
                    <th width="10%">管理费比例(%)</th>
                    <th width="10%">计算基数</th>
                    <th width="10%">计划支付(元)</th>
                    <th width="10%">实付(元)</th>
                    <th width="10%">备注</th>
                    <th width="10%" class="p-tb-0">
                        <button @click="addCost" type="button" class="ca-btn ca-btn-round"><i class="fa fa-plus"></i></button></th>
                </tr>
                <tr v-for="(item,index) in costDataList">
                    <td>
                        <el-date-picker
                            v-model="item.particularYear"
                            type="year"
                            placeholder="选择年">
                        </el-date-picker>
                    </td>
                    <td>
                        <el-select v-model="item.fundState" placeholder="请选择" style="width:100%">
                            <el-option
                                v-for="item in initView.fundCostState"
                                :label="item.name"
                                :key="item.id"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </td>
                    <td>
                        <el-input v-model="item.proportion" type="number"
                                  class="ca-vertical-align-middle"></el-input>
                    </td>
                    <td>
                        <el-input  v-model="item.computingBase"  class="ca-vertical-align-middle"></el-input>
                    </td>
                    <td>
                        <el-input v-model="item.payment" placeholder="请输入内容" class="ca-vertical-align-middle"></el-input>
                    </td>
                    <td>
                        <el-input  v-model="item.paid" placeholder="请输入内容"  class="ca-vertical-align-middle"></el-input>
                    </td>
                    <td>
                        <el-input v-model="item.remarks" placeholder="请输入内容"></el-input>
                    </td>
                    <td class="p-tb-0">
                        <button type="button" @click="deleteSingleCost(item,index)" class="ca-btn ca-btn-round"><i class="fa fa-remove"></i></button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            return {
                itemId: this.$route.params.fundId,
                initView: {
                    fundCostState: this.$store.state.user.dictionaryMap.fundCostState,// 设立状态
                }
            }
        },
        props: {
            isAdd: {
                type: Boolean,
                default() {
                    return false;
                }
            },
            costDataList: {
                type: Array
            }
        },
        created() {
        },
        methods: {
            saveManageAss() {
                apiHttp(api.CHANGE_COST,this.costDataList).then( ret=>{
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            center: true
                        });
                        this.$emit('addRedDot')
                        this.cancel();
                    }
                })
            },
            cancel() {
                this.$emit('isEdit',false)
            },
            //删除
            deleteSingleCost(item,index) {
                if (item.id) {
                    this.$confirm('是否删除此条消息?', '提示', {
                        cancelButtonText: '取消',
                        confirmButtonText: '确定',
                        type: 'warning',
                        showClose: false
                    }).then(async () => {
                        apiHttp(api.DELETE_COST,{id: item.id}).then( ret=>{
                            if (ret.resCode === STATUS_HTTP_SUCCESS) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!',
                                    center: true
                                });
                                this.cancel();
                            }
                        })
                    });
                } else {
                    this.costDataList.splice(index,1)
                }
            },
            //添加一行管理费核定
            addCost() {
                this.costDataList.push({
                    computingBase: '',//计算基数
                    fundId: this.$route.params.fundId,
                    fundState: null,
                    id: '',
                    paid: '',//实付
                    particularYear: '',
                    payment: '',//计划支付
                    proportion: '',//管理费比例
                    remarks: '',
                })
            }
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    table td{
        padding: 5px;
        box-sizing: border-box;
    }
</style>
